<template>
    <div class="select-sex">
        <!-- 顶部背景图片 -->
        <div class="top-background">
            <img src="../assets/top.png" class="img-top">
            <div class="title">投入纸条</div>
        </div>
        <!-- 抽取纸条 -->
        <div class="extract">
            <div class="warn">可选择所在城市，更精准的结识近距离好友！</div>
            <!-- 选择地址 -->
            <div class="adress-select" @click="showModal">
                <img src="../assets/address.png" class="address-icon">
                <span class="address-warn" v-if="isSelected">请选择地址</span>
                <span class="address-warn" v-else>{{ selectedOptions[0] }} / {{ selectedOptions[1] }}</span>
            </div>
            <!-- 纸条内容 -->
            <div class="adress-select">
                <img src="../assets/note.png" class="address-icon">
                <input class="address-warn" placeholder="请输入纸条内容" v-model="contact"/>
            </div>
            <!-- 省市区 -->
            <el-drawer
                v-model="drawer"
                title="请选择地址"
                :direction="direction"
                :before-close="handleClose"
            >
                <el-cascader
                    size="large"
                    :options="pcTextArr"
                    v-model="selectedOptions">
                </el-cascader>
            </el-drawer>

            <!-- 获取一张纸条 -->
            <div class="gain" @click="send">
                立即投入纸条 ￥1.0
            </div>
            <!-- 提示 -->
            <div class="tip">投的越多，被抽到的概率越大！</div>
            <!-- 提交 -->
            <div class="summit">
                <span class="summit-item" @click="back">返回上一步</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { ElNotification } from 'element-plus'
// 引入element-china-area-data
import { pcTextArr } from "element-china-area-data";
// 引入pinia
import { useUserSexStore } from '@/store';
// 引入props
import { defineProps, ref } from 'vue';

import { addUser } from '@/api'

// 使用pinia
const userSexStore = useUserSexStore();
// 获取sex属性
const selectedSex = userSexStore.sex;
const drawer = ref(false)
const direction = ref('btt')
// 是否选择省市区
const isSelected = ref(true);
const selectedOptions = ref([]);
// 选择地址
const selectAddress = ref('')
// 纸条内容
const contact = ref('')
// 接收父组件传来的数据
const props = defineProps({
    setShowMale: Function,
    showLoading: Function,
    hideLoading: Function
});
const handleClose = (done) => {
    ElMessageBox.confirm('确认选择此地点吗？', '提示')
    .then(() => {
        done()
        // 隐藏选择地址
        isSelected.value = false;
        selectAddress.value = selectedOptions.value[0] + selectedOptions.value[1];
    })
    .catch(() => {
        // catch error
    })
}
const showModal = () => {
    drawer.value = true;
}
// 点击返回上一步
const back = () => {
    // 关闭抽卡页面, 回到选择性别页面
    props.setShowMale('male');
}

// 投入·1张纸条
const send = async () => {
    // 首先判断是否选择地址，并且是否输入纸条内容
    if (selectAddress.value === '' && contact.value === '') {
        ElNotification({
            title: 'Error',
            message: '请选择地址和输入纸条内容',
            type: 'error',
        })
        return;
    } else {
        // 提交数据
        const res = await addUser(contact.value, selectedSex, selectAddress.value);
        if (res.code === 200) {
            ElNotification({
                title: 'Success',
                message: '添加成功！',
                type: 'success',
            })
            // 清空内容
            contact.value = '';
            selectAddress.value = '';
        }
    }
}
</script>

<style scoped>
.select-sex {
    width: 80%;
    /* height: 316.4px; */
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    position: relative; /* 相对定位 */
}

.top-background {
    position: relative; /* 相对定位 */
}

.img-top {
    width: 80%;
    height: auto;
    z-index: -1;
}

.title {
    position: absolute; /* 绝对定位 */
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90%;
    font-weight: bold;
}

/* 抽取纸条 */
.extract {
    position: relative; /* 相对定位 */
}
.warn {
    font-size: 12px;
    color: #a1a1a1;
}
/* 选择地址 */
.adress-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f1edfc;
    width: 70%;
    height: auto;
    padding: 15px;
    border-radius: 25px;
    margin: 15px auto;
}

.address-warn {
    font-size: 14px;
    color: #a1a1a1;
    margin-left: 10px;
}
input {
    background-color: #f1edfc;
    border: none;
}
input:focus {
    outline: none; /* 清除轮廓 */
    border: none; /* 清除边框 */
}

.address-icon {
    width: 13px;
    height: 13px;
}

/* 获取一张纸条 */
.gain {
    font-weight: 700;
    padding: 15px;
    background-color: #ffd800;
    width: 70%;
    height: auto;
    border-radius: 25px;
    margin: 10px auto;
}

/* 提示 */
.tip {
    color: #a1a1a1;
    font-size: 12px;
    margin-top: 10px;
}
/* 提交 */
.summit {
    display: flex;
    justify-content: space-evenly;
}
.summit-item {
    color: #a1a1a1;
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.put {
    color: #ffd800;
}
</style>